<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
table{
    border: 1px solid lightblue;
    border-collapse: collapse;
}
table th,table td{
    border: 1px solid lightblue;
    padding: 5px 10px;
}
</style>
</head>
<body>
    
<h1>用户列表</h1>
<table>
    <!-- <tr>
        <th>账号</th>
        <th>密码</th>
        <th>手机</th>
        <th>邮箱</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>xiaocuo</td>
        <td>123123</td>
        <td>13566668888</td>
        <td>123456789@qq.com</td>
        <td>女</td>
        <td>21</td>
    </tr> -->
</table>

<script src="./utils.js"></script>
<script>
// 前端渲染

// 请求数据
ajax({
    type: 'get',
    url: 'http://localhost:9999/user/userList',
    dataType: 'json'
})
.then((arr)=>{
    let tmp = `<tr>
                <th>账号</th>
                <th>密码</th>
                <th>手机</th>
                <th>邮箱</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>`;
    arr.forEach(item=>{
        tmp += `<tr>
                <td>${item.username}</td>
                <td>${item.password}</td>
                <td>${item.phone}</td>
                <td>${item.email}</td>
                <td>${item.sex}</td>
                <td>${item.age}</td>
            </tr>`;
    })
    $('table').innerHTML = tmp;
})
.catch((err)=>{
    $('table').innerHTML = '<h3>暂无数据！</h3>';
})


</script>
</body>
</html>